
    if( !window.XMLHttpRequest ) XMLHttpRequest = function() {
      try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0") }catch(e){}
      try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0") }catch(e){}
      try{ return new ActiveXObject("Msxml2.XMLHTTP") }catch(e){}
      try{ return new ActiveXObject("Microsoft.XMLHTTP") }catch(e){}
      throw new Error("Could not find an XMLHttpRequest alternative.")
    };
 
    function Request(function_name, opt_argv) {

      if (!opt_argv)
        opt_argv = new Array();

      // Find if the last arg is a callback function; save it
      var callback = null;
      var len = opt_argv.length;
      if (len > 0 && typeof opt_argv[len-1] == 'function') {
        callback = opt_argv[len-1];
        opt_argv.length--;
      }
      var async = (callback != null);

      // Encode the arguments in to a URI
      var query = 'action=' + encodeURIComponent(function_name);
      for (var i = 0; i < opt_argv.length; i++) {
        var key = 'arg' + i;
        var val = JSON.stringify(opt_argv[i]);
        query += '&' + key + '=' + encodeURIComponent(val);
      }
      query += '&time=' + new Date().getTime(); // IE cache workaround

      // Create an XMLHttpRequest 'GET' request w/ an optional callback handler
      var req = new XMLHttpRequest();
      req.open('GET', '/rpc?' + query, async);

      if (async) {
        req.onreadystatechange = function() {
          if(req.readyState == 4 && req.status == 200) {
            var response = null;
            try {
             response = JSON.parse(req.responseText);
            } catch (e) {
             response = req.responseText;
            }
            callback(response);
          }
        }
      }

      // Make the actual request
      req.send(null);
    }

    // Adds a stub function that will pass the arguments to the AJAX call
    function InstallFunction(obj, functionName) {
      obj[functionName] = function() { Request(functionName, arguments); }
    }
    
    var server = {};

    // Insert 'Add' as the name of a callable method
    InstallFunction(server, 'Del'); 
    InstallFunction(server, 'get_photo_info'); 
    InstallFunction(server, 'set_photo_info'); 

    function doDel(){
        var x = $("input:checked");
        var item = [];
        var id;
        x.each(function (){
            id = $(this).val();
            item.push(id);
            $("div#"+id).hide();
        });
        server.Del(item, onDelSuccess);
    }

    function doSelect(){
        var x = $("input:checkbox");
        var all_checked = true;
        var none_checked = true;
        //first round, see if all checked or none checked
        x.each(function(){
            if ($(this).attr("checked")){
                none_checked = false;
            }
            else{
                all_checked = false;
            }
        }); 
        if (all_checked && !(none_checked)) {
            x.each(function(){ $(this).attr("checked", false); });
        }
        else {
            x.each(function(){ $(this).attr("checked", true); });
        }

    }

    // Callback for after a successful doAdd
    function onDelSuccess(response) {
      //$("#result").text(response);
    }
    function onGetinfoSuccess(response) {
        //alert("on get info success");
        for (key in response){
            x = response[key];
            $("#photoinfo").append("<tr><td><input type='text' value='"+x+"' id='"+key+"' >"+key+"</td></tr>");
        }
        $("#photoinfo").append("<button type='button' onclick='save()' >Save</button>");
    }

    var saved_id;
    $("img").click(function showpic(){
        //alert("image clicked");
        $(".cbigpic").remove();
        var id = $(this).attr("id");
        saved_id = id;
        $("#bigpic").append( "<div class='cbigpic' id='"+id+"'> <table> <tr><td><div id='photoinfo'></div></td></tr><tr><td><img src='img?img_id="+id+" '></img></td></tr></table> </div>");
        server.get_photo_info(id, onGetinfoSuccess);
        //Tag<input type='text' id='tag'></td></tr><tr><td> comment<input type='text' id='comment'></td></tr><tr><td> <button type='button' onclick='save()'>Save</button>
    });

    function save(){
        server.set_photo_info([saved_id, $("#tag").val(), $("#comment").val()] );
    }
    function draw_nation_flag(ctx, f){
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (0,0,30*f,20*f);
        ctx.closePath();
        draw_star(ctx,5*f,5*f,3*f, 0);
        draw_star(ctx,10*f,2*f,1*f, -0.54-Math.PI/2);
        draw_star(ctx,12*f,4*f,1*f, -0.142-Math.PI/2);
        draw_star(ctx,12*f,7*f,1*f, 0.278-Math.PI/2);
        draw_star(ctx,10*f,9*f,1*f, 0.674-Math.PI/2);
    }

    function draw_star(ctx, x, y, r, t){
            x0=x+r*Math.sin(t);
            x1=x+r*Math.sin(Math.PI*2/5+t);
            x2=x+r*Math.sin(Math.PI*4/5+t);
            x3=x+r*Math.sin(Math.PI*6/5+t);
            x4=x+r*Math.sin(Math.PI*8/5+t);
            y0=y-r*Math.cos(t);
            y1=y-r*Math.cos(Math.PI*2/5+t);
            y2=y-r*Math.cos(Math.PI*4/5+t);
            y3=y-r*Math.cos(Math.PI*6/5+t);
            y4=y-r*Math.cos(Math.PI*8/5+t);

            ctx.beginPath();
            ctx.moveTo(x0,y0);
            ctx.lineTo(x2,y2);
            ctx.lineTo(x4,y4);
            ctx.lineTo(x1,y1);
            ctx.lineTo(x3,y3);
            ctx.lineTo(x0,y0);
            ctx.closePath();
            ctx.fillStyle = "rgb(200,200,0)";
            ctx.fill(); 

            //ctx.beginPath();
            //ctx.arc(x,y,r,0,Math.PI*2);
            //ctx.closePath();
            //ctx.stroke();
    }
    function draw(){
        var canvas= document.getElementById("myshape"); 
        //if (canvas.getContext) {
            var ctx = canvas.getContext("2d"); 
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect (10, 10, 55, 50); 
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect (30, 30, 55, 50);

            ctx.beginPath();
            ctx.arc(250,150, 50, 0, Math.PI, false); 
            ctx.arc(225,150, 25, Math.PI, 0, false);
            ctx.arc(275,150, 25, Math.PI, 0, true);
            ctx.closePath();
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fill(); 

            ctx.beginPath();
            ctx.arc(225,150, 5, Math.PI*2, 0, false);
            ctx.closePath();
            ctx.fillStyle = "rgb(0,200,0)";
            ctx.fill(); 


            ctx.beginPath();
            ctx.arc(250,150, 50, 0, Math.PI, true); 
            ctx.arc(225,150, 25, Math.PI, 0, false);
            ctx.arc(275,150, 25, Math.PI, 0, true);
            ctx.closePath();
            ctx.fillStyle = "rgb(0,200,0)";
            ctx.fill();

            ctx.beginPath();
            ctx.arc(275,150, 5, Math.PI*2, 0, false);
            ctx.closePath();
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fill(); 

        

        //} 
        var canvas= document.getElementById("flag"); 
        var ctx = canvas.getContext("2d"); 
        draw_nation_flag(ctx, 10);
    }

